<template>
    <PageView>
        <a-card title="列表">
            <a-button type="primary" slot="extra" @click="edit()">添加公告</a-button>
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Art from '../../api/Art'
    export default {
        name: 'noticeList',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '标题',
                        dataIndex: 'title',
                    },
                    {
                        title: '内容',
                        dataIndex: 'content',
                    },
                    {
                        title: '添加时间',
                        dataIndex: 'add_time',
                        customRender: (v) => this.timeOne(v)
                    },
                    {
                        title: '添加时间',
                        dataIndex: 'status',
                        customRender: (v) => {
                            let status = {
                                2: { name: '显示', color: 'success' },
                                1: { name: '不显示', color: 'error' }
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-dropdown>
                                    <a-menu slot="overlay">
                                        <a-menu-item onClick={() => {
                                            this.del(v.id)
                                        }}>删除
                                        </a-menu-item>
                                        <a-menu-item onClick={() => {
                                            this.edit(v.id,v.title, v.content,v.status==="2"?true:false)
                                        }}>编辑
                                        </a-menu-item>
                                    </a-menu>
                                    <a-button>操作 <a-icon type="down"/></a-button>
                                </a-dropdown>
                            )
                        }
                    }
                ],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getList () {
                this.loading = true
                Art.getGonggao({
                    page: this.current,
                    num: this.pageSize,
                }).then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            del(id) {
                this.$confirm({
                    title: `删除`,
                    content: `确定要删除此公告吗?`,
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Art.delGonggao({ id }).then(res => {
                                resolve()
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            edit(id,tit, con,sta){
                console.log(id)
                let [title, content,status] = [id?tit:'',id?con:``,id?sta:true]
                this.$confirm({
                    title: `${id?`编辑`:`新增`}公告`,
                    content: (
                        <div>
                            <a-switch onChange={(e)=>{
                                status = e
                            }} style="margin-top:10px" checkedChildren="显示" unCheckedChildren="关闭" defaultChecked={status}/>
                            <a-input onInput={(e)=>{
                                title = e.target.value
                            }} style="margin-top:20px" placeholder="请输入标题" defaultValue={title}/>
                            <a-textarea onInput={(e)=>{
                                content = e.target.value
                            }} style="margin-top:20px" placeholder="请输入公告内容" rows={8} defaultValue={content}/>
                        </div>
                    ),
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            if (content === '') {
                                this.$notification.warning({
                                    message: '提示',
                                    description: '请输入公告内容'
                                })
                                reject()
                            } else {
                                Art[id?`saveGonggao`:`addGongGao`]({ id, title, content,status:status?2:1 }).then(res => {
                                    resolve()
                                    this.getList()
                                }).catch(res => {
                                    reject()
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>